<template>
  <a-modal
    v-model="visible"
    title="工序信息"
    width="80%"
    @cancel="visible = false"
  >
    <!-- 流转卡详情字段 -->
    <div class="detail-section">
      <h3>流转卡详情</h3>
      <a-row :gutter="[16, 16]">
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">流转卡号：</span>
            <span class="value">{{ detailData.cardNumber || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">MO编号：</span>
            <span class="value">{{ detailData.moNumber || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">物料编码：</span>
            <span class="value">{{ detailData.materialCode || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">物料名称：</span>
            <span class="value">{{ detailData.materialName || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">规格型号：</span>
            <span class="value">{{ detailData.specification || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">材质：</span>
            <span class="value">{{ detailData.materialType || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">表面处理：</span>
            <span class="value">{{ detailData.surfaceTreatment || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">数量：</span>
            <span class="value">{{ detailData.quantity || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">单位：</span>
            <span class="value">{{ detailData.unit || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">计划开始时间：</span>
            <span class="value">{{ detailData.plannedStartTime || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">计划结束时间：</span>
            <span class="value">{{ detailData.plannedEndTime || '-' }}</span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="detail-item">
            <span class="label">生命周期：</span>
            <span class="value">{{ detailData.lifecycle || '-' }}</span>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 分隔线 -->
    <a-divider />

    <!-- 表格 -->
    <pro-table
      ref="table"
      toolbar-title=""
      :row-key="rowKey"
      :request="tableRequest"
      :columns="columns"
    />

    <!-- 底部 -->
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import ProTable from '@/components/Table/ProTable.js'
import { doRequest } from '@/utils/request'
import { getDetails } from '@/api/ProductionProcesses/t-process-flow-card'


export default {
    name: 'TProcessFlowCardModalDetail',
    components: { ProTable },
    emits: ['close'], // 声明有效事件
    data() {
        return {
            visible: false,  // 控制弹窗显示
            rowKey: 'id',
            detailData: {
                cardNumber: '', // 存储流转卡号
                moNumber: '', // MO编号
                materialCode: '', // 物料编码
                materialName: '', // 物料名称
                specification: '', // 规格型号
                materialType: '', //材质
                surfaceTreatment: '', //表面处理
                quantity: '', //数量
                unit: '', // 单位
                plannedStartTime: '', // 计划开始时间
                plannedEndTime: '', // 计划结束时间
                lifecycle: '', // 生命周期
            },
            tableRequest: async params => {
              const res = await getDetails(this.detailData.cardNumber, params);
              // console.log(res)
              if (res.data?.records) {
                res.data.records = res.data.records.map(item => ({
                  ...item,
                  totalTimeConsumption: this.formatSecondsToTime(item.totalTimeConsumption),
                }));
              }
              return res;
            },
            columns: [
                {
                    title: '#',
                    dataIndex: 'id'
                },
                {
                    title: '流转卡号',
                    dataIndex: 'flowCardNumber'
                },
                {
                    title: '工序序号',
                    dataIndex: 'processSequence'
                },
                {
                    title: '工序编码',
                    dataIndex: 'processCode'
                },
                {
                    title: '工序名称',
                    dataIndex: 'processName'
                },
                {
                    title: '总耗时',
                    dataIndex: 'totalTimeConsumption'
                },
                {   title: '准备工时(分钟)',
                    dataIndex: 'setupTime'
                },
                {
                  title: '标准工时(分钟)',
                  dataIndex: 'standardTime'
                },
                {
                    title: '总数量',
                    dataIndex: 'totalQuantity'
                },
                {
                    title: '完工数量',
                    dataIndex: 'completedQuantity'
                },
                {
                    title: '报废数量',
                    dataIndex: 'scrappedQuantity'
                },
                {
                    title: '状态',
                    dataIndex: 'statusMsg'
                }
            ]
        }
    },
    methods: {
        reloadPageTable(withFirstPage = true) {
          this.$refs.table.reloadTable(withFirstPage)
        },
        open(record = {}) {
            // console.log(record);
            this.detailData.cardNumber = record.cardNumber
            this.detailData.moNumber = record.moNumber // MO编号
            this.detailData.materialCode = record.materialCode // 物料编码
            this.detailData.materialName = record.materialName // 物料名称
            this.detailData.specification = record.specification  // 规格型号
            this.detailData.materialType = record.materialType  //材质
            this.detailData.surfaceTreatment = record.surfaceTreatment //表面处理
            this.detailData.quantity = record.quantity
            this.detailData.unit = record.unit
            this.detailData.plannedStartTime = record.plannedStartTime
            this.detailData.plannedEndTime = record.plannedEndTime
            this.detailData.lifecycle = record.lifecycle
            this.visible = true
            // this.reloadPageTable()
        },
        close() {
            this.visible = false;
            this.$emit('close'); // 触发关闭事件
        },
        formatSecondsToTime(seconds) {  // 注意修正参数声明
          if (seconds == null || isNaN(seconds) || seconds === 0) return '-';
          const h = Math.floor(seconds / 3600);
          const m = Math.floor((seconds % 3600) / 60);
          const s = seconds % 60;
          const parts = [];
          if (h > 0) parts.push(`${h}小时`);
          if (m > 0) parts.push(`${m}分`);
          if (s > 0 || parts.length === 0) parts.push(`${s}秒`);
          return parts.join('');
        }
    }
}
</script>

<style scoped>
.dialog-footer {
    text-align: right;
}
</style>


<style scoped>
.detail-section {
    margin-bottom: 24px;
}

.detail-section h3 {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
}

.detail-item {
    display: flex;
    align-items: center;
}

.detail-item .label {
    width: 100px;
    font-weight: bold;
    color: #555;
}

.detail-item .value {
    flex: 1;
    color: #333;
}
</style>
